<script setup lang="ts">
import {Service} from "@element-plus/icons-vue";
import {nextTick, ref} from "vue";
import axios from "axios";
import {useUserStore} from "../store/user.ts";
const visible = ref(false);
const loading = ref(false);
const userStore = useUserStore();
interface Message {
  content: string;
  role: string;
}

const inputValue = ref("");
const messages = ref<Message[]>([
    {
      content: "你好，我是智能客服，请问有什么可以帮到你？",
      role: "客服"
    },
])

const insertMessage = async (message: Message) => {
  messages.value.push(message)
  await nextTick();
  let container = document.getElementById('chat-container');
  container.scrollTop = container.scrollHeight;
}


const handleSend = () => {

  insertMessage({
    content: inputValue.value,
    role: "user"
  })
  inputValue.value =""
  loading.value = true;

  let data = {
    messages: messages.value.slice(1)
  }

  axios({
    method: 'POST',
    url: 'http://localhost:8888/api/chat',
    headers: {
      'Authorization': 'Bearer-' + localStorage.getItem("token")
    },
    data: data
  }).then(res => {
    if (res.data.code === 200) {
      insertMessage({
        content: res.data.data,
        role: "assistant"
      })
      loading.value = false;
      let container = document.getElementById('chat-container');
      container.scrollTop = container.scrollHeight;
    }
  })

}

</script>

<template>
  <div
      v-if="userStore.isLogin"
      @click="visible = !visible"
      style="box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);"
      class="rounded-full flex flex-col justify-center cursor-pointer items-center w-16 h-16 bg-white fixed top-1/2 left-3">
    <el-icon size="20"><Service /></el-icon>
    <div class="text-xs mt-1">智能客服</div>
  </div>
  <el-dialog
    v-model="visible"
    title="智能客服"
    width="50%"
    style="background-color: #EBEBEB;"
    top="5vh"
  >
    <div id="chat-container" class="chat-container">
      <div v-for="message in messages">
        <div class="flex mt-5 mb-5 w-full" :class="message.role =='user' ? 'flex-row-reverse' : ''">
          <img v-if="message.role =='user'" class="w-10 h-10 rounded-full" src="../assets/image/user_avatar.png" alt="avatar" />
          <img v-else class="w-10 h-10 rounded-full" src="../assets/image/ai_avatar.png" alt="avatar" />
          <div class="flex flex-col ml-1">
            <!-- <div class="text-sm mr-1 ml-1" :class="message.role =='user' ? 'text-right' : ''">
              {{ message.role }}
            </div> -->
            <div
                :class="message.role =='user' ? 'bg-amber-50 rounded-tr-none rounded-tl-lg' : ''"
                class="bg-white break-all max-w-96 text-black p-3 m-1 rounded-lg rounded-tl-none">
              {{ message.content }}
            </div>
          </div>
        </div>
      </div>
      <div>
        <div v-if="loading" class="flex mt-5 mb-5 w-full">
          <img class="w-10 h-10 rounded-full" src="../assets/image/ai_avatar.png" alt="avatar" />
          <div class="flex flex-col ml-1">
            <!-- <div class="text-sm mr-1 ml-1">
              客服
            </div> -->
            <div class="loader h-16 rounded-lg mt-1 rounded-tl-none w-48 bg-white">
              <div id="loader">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tool-container space-x-4 flex">
      <el-input
          v-model="inputValue"
          size="large"
      />
      <el-button
          @click="handleSend"
          :disabled="inputValue == null || inputValue.length == 0"
          size="large"
          color="#ef4444"
      >
        发送
      </el-button>
    </div>
  </el-dialog>
</template>

<style scoped>
.chat-container {
  height: 500px;
  overflow-y: auto;
  border-top: 1px solid #c5c1c1;
}
.tool-container {
  padding-top: 20px;
  border-top: 1px solid #c5c1c1;
}

#loader {
  padding: 2rem;
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: space-around;
}
#loader div {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #D91E36;
}
#loader div:nth-child(1) {
  animation: loader 3s linear infinite 0s;
}
#loader div:nth-child(2) {
  animation: loader 3s linear infinite 0.15s;
}
#loader div:nth-child(3) {
  animation: loader 3s linear infinite 0.3s;
}
#loader div:nth-child(4) {
  animation: loader 3s linear infinite 0.45s;
}

@keyframes loader {
  0% {
    opacity: 0;
    transform: scale(0.3);
    background: #59CD90;
  }
  25% {
    opacity: 1;
    transform: scale(1.8);
    background: #0072BB;
  }
  50% {
    opacity: 0;
    transform: scale(0.3);
    background: #FE4A49;
  }
  75% {
    opacity: 1;
    transform: scale(1.8);
    background: #FED766;
  }
  100% {
    opacity: 0;
  }
}
</style>
